<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="formData"
      label-width="90px"
      style="width: 400px"
    >
      <el-form-item label="名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="formData.price"></el-input>
      </el-form-item>
      <el-form-item label="原价">
        <el-input v-model="formData.orginal_price"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="formData.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onEdit">更新</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { update } from "@/api/channel";

export default {
  name: "ChnEdit",
  data() {
    return {
      formData: {
        name: "",
        price: "",
        desc: "",
        orginal_price: "",
        id: 0,
      },
      autoUpload: false,
      fileList: [],
    };
  },
  computed: {},
  props: ["theme"],
  watch: {
    theme: function (nv, ov) {
      this.initFormData();
    },
  },
  mounted() {
    this.initFormData();
  },
  methods: {
    // 发布
    onEdit() {
      let data = {
        name: this.formData.name,
        desc: this.formData.desc,
        price: this.formData.price,
        orginal_price: this.formData.orginal_price,
        id: this.formData.id,
      };
      update(data).then((res) => {
        this.$message.success("更新成功!!!");
        this.$emit("close");
      });
    },
    // 初始化formData
    initFormData() {
      if (this.theme != undefined) {
        this.formData.name = this.theme.name;
        this.formData.price = this.theme.price;
        this.formData.desc = this.theme.desc;
        this.formData.orginal_price = this.theme.orginal_price;
        this.formData.id = this.theme.id;
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-img {
  width: 40px;
  height: 40px;
  border: 2px solid #409eff;
  border-radius: 5px;
}
.el-button--text {
  padding-top: 0px;
  color: #7c796e;
}
.op-form {
  background: #f5f9ff;
  border: 1px dashed #cccccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 12px;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>

